<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="./js/iconfont.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .icon {
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        #logo-nav {
            width: 1400px;
            margin: 0 auto;
        }

        header {
            width: 200px;
            float: left;
        }

        nav {
            width: 1200px;
            float: left;
            line-height: 65px;
        }

        nav a {
            margin-left: 20px;
            text-decoration: none;
            color: skyblue;
        }

        nav .search {
            margin-right: 50px;
            float: right;
        }

        nav .search input {
            outline: none;
            border-radius: 5px;
        }

        #container {
            margin: 0 auto;
            width: 1400px;
            height: 100%;
        }

        .swiper {
            width: 100%;
            height: 300px;
        }

        .swiper img {
            width: 1400px;
            height: 300px;
        }

        #container article {
            height: 300px;
        }

        #container article h3 {
            font-size: 1.5rem;
            line-height: 42px;
        }

        #container article a {
            color: #bc0c3b;
            font-weight: 600;
        }

        #container>article {
            padding-top: 8%;
            line-height: 2rem;
            margin-left: 2.5rem;
            width: 680px;
            float: left;
            height: 310px;
        }

        #container section {
            width: 680px;
            float: right;
            margin-top: 50px;
        }

        #container section img {
            border-radius: 1rem;
            float: right;
        }

        #container .introduce article {
            margin-top: 50px;
            width: 400px;
            float: left;
            margin-left: 2.5rem;
            line-height: 2rem;
        }

        #container.introduce article h4 {
            font-size: 20px;
        }

        #container .show {
            float: left;
            width: 100%;
            height: 500px;
            background-color: #dddddd;

        }


        #container .show-img img {
            margin-top: 50px;
            margin-left: 50px;
            float: left;
            width: 280px;
        }

        #container .show-img .pic1 {
            margin-top: 50px;
            margin-left: 50px;
            float: left;
            width: 300px;
            height: 400px;
            background-image: url(./素材/sidebar1.jpg);
        }

        .pic-info {
            height: 400px;
            background-color: rgba(107, 164, 233, .8);
            position: absolute;
            box-sizing: border-box;
        }

        .pic-info span {
            display: inline-block;
            width: 300px;
            text-align: center;
            line-height: 400px;
        }

        .park span {
            position: absolute;
            background-color: rgba(107, 164, 233, .8);
            width: 280px;
            text-align: center;
            margin-top: 205px;
            margin-left: -280px;
        }

        .forest span {
            background-color: rgba(107, 164, 233, .8);
            float: left;
            width: 280px;
            text-align: center;
            margin-left: -280px;
            margin-top: 204px;
        }

        .work {
            float: left;
            width: 100%;
            height: 300px;
            background-image: url(./素材/recruit.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .work .work-info {
            float: left;
            width: 700px;
            margin-left: 100px;
            line-height: 300px;
        }

        .work .job {
            float: left;
            height: 230px;
            ;
            width: 550px;
            background-color: rgba(129, 136, 137, .6);
            margin-top: 35px;

        }

        .work .job .job-manage {
            line-height: 25px;
            width: 80%;
            margin: 0 auto;
            padding-top: 20px;
        }

        .work .job .job-manage a {
            text-decoration: none;
            color: white;
            cursor: default;
        }

        .work .job .job-manage span {
            float: right;
        }

        footer {
            float: left;
            width: 1400px;
            height: 249px;
            background-color: #e2d0d0ca;
        }

        footer .footer-info a {
            float: right;
            margin-right: 100px;
            text-decoration: none;
        }

        footer .footer-info {
            margin-top: 50px;
            margin-left: 100px;
        }

        footer .footer-info1 {
            margin-top: 40px;
            margin-left: 100px;
        }

        footer .footer-info1 a {
            padding-left: 10px;
            color: skyblue;
        }
    </style>
</head>

<body>
    <script src="./js/index.js"> </script>
    <div id="logo-nav">
        <header><img src="./素材/logo.png" alt="" class="animate__animated animate__bounceInDown animate__delay-1s">
        </header>
        <nav class="animate__animated animate__bounceInDown animate__delay-2s">
            <a href="#">首页</a>
            <a href="#">公司概况</a>
            <a href="#">华阳湖景区</a>
            <a href="#">岭南水乡小镇</a>
            <a href="#">意见反馈</a>
            <div class="search">
                <input type="text">
                <svg class="icon" aria-hidden="true" style="position: relative;top: 9px;">
                    <use xlink:href="#icon-sousuokuang"></use>
                </svg>
            </div>
        </nav>
    </div>
    <div id="container">
        <main>
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./素材/banners/banner1.jpg" alt="海上庭院"
                            class="animate__animated animate__bounceInUp animate__delay-3s"></div>
                    <div class="swiper-slide"><img src="./素材/banners/banner2.jpg" alt="浪漫海滩"></div>
                    <div class="swiper-slide"><img src="./素材/banners/banner3.jpg" alt="风土人情"></div>
                    <div class="swiper-slide"><img src="./素材/banners/banner4.jpg" alt="漫天花海"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </main>
        <article>

            <h3 class="animate__animated animate__rollIn animate__delay-3s">快速了解<a>云南城投</a></h3>
            <p class="animate__animated animate__bounceInLeft animate__delay-3s">
                云南省城市建设投资集团有限公司（简称：云南城投集团，原名：云南省城市建设投资有限公司
                2012年7月更名)成立于2005年4月，是经云南省人民政府批准组建的现代大型国有企业，是云南
                省人民政府授权的城建投资项目出资人代表及实施机构。2009年2月，集团纳入云南省国资委监
                管。</p>
        </article>
        <section>
            <img src="./素材/company.jpg" alt="" class="animate__animated animate__fadeInRight animate__delay-3s">
        </section>
        <div class="introduce">
            <article>

                <h4 class="animate__animated animate__rollIn animate__delay-3s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangbei"></use>
                    </svg>公司介绍
                </h4>
                <p class="animate__animated animate__bounceInLeft animate__delay-3s">广东云景游文化有限公司（简称：云号游）成立于2016年1月26日，注
                    册资本金3亿元，是云南省城市建设投资集团有限公司的控股子公司。</p>
            </article>
            <article>

                <h4 class="animate__animated animate__rollIn animate__delay-3s"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuojidianhua"></use>
                    </svg>发展目标</h4>
                <p class="animate__animated animate__bounceInLeft animate__delay-3s">云景旅游以集团公司战路为发展目标，围绕集团公司战路部考，贵切广东省
                    产业转型升级的精神，大力发展旅游文化产业，通过建设开发旅游资源，促
                    进广东省旅游环境的发展。</p>
            </article>
            <article>

                <h4 class="animate__animated animate__rollIn animate__delay-3s"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shizhong"></use>
                    </svg>公司地址</h4>
                <p class="animate__animated animate__bounceInLeft animate__delay-3s">
                    集团公司：广东云景游文化产业有限公司<br />
                    公司地址：广州市海珠区新港西路152号大院<br />
                    联系电话：0871-67199708
                </p>
            </article>
        </div>
        <div class="show">
            <div class="show-img">
                <div class="pic1">
                    <div class="pic-info">
                        <span>华阳湖景区</span>
                    </div>
                </div>
                <div class="park"><img src="./素材/hua/A1.jpg" alt="A1"><span>湿地公园</span></div>
                <div class="park"><img src="./素材/hua/A2.jpg" alt="A2"><span>湿地公园</span></div>
                <div class="park"><img src="./素材/hua/A3.jpg" alt="A3"><span>湿地公园</span></div>
                <div class="forest"><img src="./素材/hua/A4.jpg" alt="A4"><span>水上森林</span></div>
                <div class="forest"><img src="./素材/hua/A5.jpg" alt="A5"><span>水上森林</span></div>
                <div class="forest"><img src="./素材/hua/A6.jpg" alt="A6"><span>水上森林</span></div>
            </div>
        </div>

        <div class="show">
            <div class="show-img">
                <div class="pic1">
                    <div class="pic-info">
                        <span>岭南水乡小镇</span>
                    </div>
                </div>
                <div class="park"><img src="./素材/hua/A1.jpg" alt="A1"><span>湿地公园</span></div>
                <div class="park"><img src="./素材/hua/A2.jpg" alt="A2"><span>湿地公园</span></div>
                <div class="park"><img src="./素材/hua/A3.jpg" alt="A3"><span>湿地公园</span></div>
                <div class="forest"><img src="./素材/hua/A4.jpg" alt="A4"><span>水上森林</span></div>
                <div class="forest"><img src="./素材/hua/A5.jpg" alt="A5"><span>水上森林</span></div>
                <div class="forest"><img src="./素材/hua/A6.jpg" alt="A6"><span>水上森林</span></div>
            </div>
        </div>
        <div class="work">
            <div class="work-info">
                <img src="./素材/recruitLeft.png" alt="">
                <span>你或许可以在这里找到一个适合的工作，并收获一个大家庭</span>
                <img src="./素材/recruitRight.png" alt="">
            </div>
            <div class="job">
                <div class="job-manage">
                    <div><a style="display: inline-block;font-weight:700;font-size:1.5rem">职位</a><span>更多</span></div>
                    <hr>
                    <div><a>经理</a><span>2020-06-29</span></div>
                    <div><a>造价主管</a><span>2020-06-29</span></div>
                    <div><a>网络编程人员</a><span>2020-06-29</span></div>
                    <div><a>工程师</a><span>2020-06-29</span></div>
                    <div><a>文秘</a><span>2020-06-29</span></div>
                    <div><a>导游</a><span>2020-06-29</span></div>
                </div>
            </div>
            <footer>
                <div class="footer-info">
                    &copy; 2022广东云景旅游文化产业有限公司<a href="#" >回到顶部</a>
                </div>
                <div class="footer-info1"><a href="#">友情链接</a>|<a href="#">隐私与安全</a>|<a href="#">法律声明</a></div>
            </footer>
        </div>
        <script>
            var mySwiper = new Swiper('.swiper', {
                loop: true, // 循环模式选项
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })        
        </script>
           
</body>

</html>